<template>
  <div class="grid-content">
    <el-row :gutter="10" type="flex" justify="center">
      <!-- 作品信息，区分单图和组图 -->
      <el-col :span="14">
        <!-- 大图展示，组图左右翻页，标题，简介，按钮：喜欢、收藏 -->
        <div class="bg-purple">
          <el-image fit="contain" :src="picInfo.imgUrl"></el-image>
          <h3>{{picInfo.title}}</h3>
          <span> {{picInfo.intro}}</span>
        </div>
        <!-- 评论区 -->
        <div>
          <el-card shadow="always">
            评论区，待开发。。。。
          </el-card>
        </div>
        <!-- 相似图片，根据标签、标题 -->
        <div>
          <el-card shadow="always">
            相似图片，待开发。。。。
          </el-card>
        </div>
      </el-col>
      <el-col :span="5">
        <!-- 右边栏作者信息、关注、用户其他图片缩略图 -->
        <div class="bg-purple-light">
          <el-avatar :size="110" :src="picInfo.picture" :key="picInfo.id">
            <img src="/image/login.jpg"/>
          </el-avatar>
          <h3>{{picInfo.name}}</h3>
          <span>{{picInfo.authorIntro}}</span>
        </div>
      </el-col>
    </el-row>
    <!-- 关闭按钮,相对浏览器窗口的绝对定位 -->
    <div style="position: fixed;top: 0;right: 2rem;font-size: 50px" @click="closeDialog">
      <el-button icon="el-icon-close" round></el-button>
    </div>
  </div>
</template>

<script>
  import {getPicDetail} from '../../api/aliyun.js';

  const imgurl = 'http://43.226.152.27:8888/img/';
  export default {
    name: 'picDetail',
    data() {
      return {
        Id: this.picId,
        picInfo: {
          'id': 1,
          'title': '标题',
          'intro': '作品简介',
          'tags': '标签',
          'imgUrl': '图片地址',
          'likeNum': 0,
          'collectNum': 0,
          'authorId': '82',
          'updateTime': '2020-08-26 12:59:50',
          'name': '作者名称',
          'picture': '头像',
          'authorIntro': '作者简介',
        }
      };
    },
    computed: {},
    props: ['picId'],
    methods: {
      closeDialog() {
        this.picInfo = {};
        this.$emit('closedialog');
      },
      getInfo() {
        console.log('查询图片详情');
        getPicDetail({id: this.picId}).then(response => {
          console.log(response);
          if (!response.success) {
            this.$message.error(response.msg);
          } else {
            this.picInfo = response.data;
            this.picInfo.imgUrl = imgurl + response.data.imgUrl;
            console.log(this.picInfo.picture);
          }
        });
      }
    }
  }
</script>

<style scoped>
  .grid-content {
    height: 100vh;
  }

  .el-col {
    background-color: #F0F2F5;
  }

  .bg-purple {
    margin-left: 40px;
    background: #FFFFFF;
  }

  .bg-purple-light {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #FFFFFF;
    margin-right: 40px;
    height: 100vh;
  }
</style>
